@import "variables";


.video-container {
    @include page-height;
}


.video-deck {
    margin-left: 30px - 15px - 10px;
    margin-right: 30px - 15px - 10px;
    margin-top: 0.2 * 1.25rem;
    padding-top: 0.8 * 1.25rem;
    justify-content: center;

    &-single {
        padding-left: $card-between-distance / 2;
        padding-right: $card-between-distance / 2;
        margin-bottom: 1.25rem;
        max-width: 16rem + $card-between-distance;
    }

    .card {
        background-color: $bg-white;
        border: transparent;
        box-shadow: 3px 4px 8px 4px rgba(92,92,92,0.08);
        border-radius: 0.375rem;
        margin-left: 0;
        margin-right: 0;

        &-body {
            padding: 0.75rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        &-title, 
        &-text {
            margin-bottom: 0;
        }

        &-title {
            @include small-title;
        }

        &-text {
            @include plain-text;
        }

        .hidden-id {
            @include plain-text-key;
            color: $bg-yellow-light;
            float: right;
        }
    }
}